<template>
	<view class="register-bg">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<!-- <text class="back" @click="goBack"> &lt; </text> -->
			<text class="nav-title">注册</text>
		</view>

		<!-- 表单卡片 -->
		<view class="card">
			<view class="form-row">
				<text class="label">负责人：</text>
				<input class="input" v-model="form.name" placeholder="输入负责人姓名" />
			</view>
			<view class="form-row">
				<text class="label">身份证号码：</text>
				<input class="input" v-model="form.idCard" placeholder="输入负责人身份证号码" />
			</view>
			<view class="form-row">
				<text class="label">手机号：</text>
				<input class="input" v-model="form.phone" placeholder="输入手机号" />
			</view>
			<!-- <view class="form-row">
				<text class="label">验证码：</text>
				<input class="input" v-model="form.code" placeholder="输入验证码" />
				<text class="get-code" @click="getCode">获取验证码</text>
			</view> -->
			<view class="form-row">
				<text class="label">店名：</text>
				<input class="input" v-model="form.shopName" placeholder="输入店名" />
			</view>
			<view class="form-row">
				<text class="label">工商营业执照号码：</text>
				<input class="input" v-model="form.licenseNo" placeholder="输入营业执照号码" />
			</view>
			<view class="form-row">
				<text class="label">经营区域：</text>
				<picker mode="selector" :range="areas" @change="onAreaChange">
					<view class="input select">{{ form.area || '选择区县' }}</view>
				</picker>
			</view>
			<view class="form-row">
				<text class="label">地址：</text>
				<input class="input" v-model="form.address" placeholder="输入详细地址" />
			</view>
		</view>

		<!-- 商家简介 -->
		<view class="card">
			<view class="section-title">商家简介</view>
			<textarea class="textarea" v-model="form.intro" placeholder="请准确的介绍一下公司的情况" auto-height />
		</view>

		<!-- 身份证正反面照片 -->
		<view class="card">
			<view class="section-title">身份证正反面照片</view>
			<view class="img-row">
				<view class="img-upload" @click="uploadImg('idFront')">
					<image v-if="form.idFront" :src="form.idFront" class="img" />
					<view v-else class="img-placeholder">+<br />上传人像面</view>
				</view>
				<view class="img-upload" @click="uploadImg('idBack')">
					<image v-if="form.idBack" :src="form.idBack" class="img" />
					<view v-else class="img-placeholder">+<br />上传国徽面</view>
				</view>
			</view>
		</view>

		<!-- 营业执照 -->
		<view class="card">
			<view class="section-title">营业执照</view>
			<view class="img-row">
				<view class="img-upload" @click="uploadImg('licenseImg')">
					<image v-if="form.licenseImg" :src="form.licenseImg" class="img" />
					<view v-else class="img-placeholder">+<br />上传照片</view>
				</view>
			</view>
		</view>

		<!-- 门店照片 -->
		<view class="card">
			<view class="section-title">门店照片</view>
			<view class="img-row">
				<view class="img-upload" @click="uploadImg('shopImg')">
					<image v-if="form.shopImg" :src="form.shopImg" class="img" />
					<view v-else class="img-placeholder">+<br />上传照片</view>
				</view>
			</view>
		</view>

		<!-- 注册按钮 -->
		<button class="register-btn" @click="register">注册</button>
		
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import request from '../util/request.js';
	import baseUrl from '../util/urlConfig.js';

	const form = ref({
		name: '',
		idCard: '',
		phone: '',
		code: '',
		shopName: '',
		licenseNo: '',
		area: '',
		address: '',
		intro: '',
		idFront: '',
		idBack: '',
		licenseImg: '',
		shopImg: ''
	})

	const areas = ['天河区', '越秀区', '海珠区', '荔湾区', '白云区', '黄埔区']

	const onAreaChange = e => {
		form.value.area = areas[e.detail.value]
	}

	const getCode = () => {
		uni.showToast({
			title: '验证码已发送',
			icon: 'none'
		})
	}

	const uploadImg = async (key) => {
		uni.chooseImage({
			count: 1,
			success: res => {
				form.value[key] = res.tempFilePaths[0]
				console.log(form.value.shopImg);
				console.log(res)
				uni.uploadFile({
					url: 'http://localhost:8080/file/upload',
					name: 'file',
					method: 'POST',
					filePath: res.tempFilePaths[0],
					success(res) {
						console.log(res);
						const result = JSON.parse(res.data);
						form.value[key] = result.data.url;
						console.log(form.value[key]);
					}

				})
			}
		})
	}

	const goBack = () => {
		uni.navigateBack()
	}

	const register = () => {
		// uni.showToast({ title: '注册成功', icon: 'success' });
		// uni.navigateTo({
		// 	url:'/pages/login/login'
		// })
		//首先添加商户端
		request({
			url: baseUrl + '/wx/merchant/addMerchant',
			method: 'POST',
			data: {
				name: form.value.shopName,
				photo: form.value.shopImg,
				operatingArea: form.value.area,
				address: form.value.address,
				description: form.value.intro
			},
			success(res) {
				console.log(res.data) //获得商户对象
				//再添加商户认证
				request({
					url: baseUrl + '/wx/verification',
					method: 'POST',
					data: {
						mid: res.data.id,
						director: form.value.name,
						mobile: form.value.phone,
						idCard: form.value.idCard,
						businessLicenseImg: form.value.licenseImg,
						front: form.value.idFront,
						opposite: form.value.idBack
						
					},
					success(res){
						console.log(res);
					}
					
				})
				
				// request({
				// 	url: baseUrl + '/wx/verification',
				// 	method: 'PUST',
				// 	data: {
				// 		mid: res.data.id,
				// 		id: 
				// 	},
					
				// })
			}

		})

	}
</script>

<style scoped>
	.register-bg {
		background: #f8f9fa;
		min-height: 100vh;
		padding-bottom: 60rpx;
	}

	.nav-bar {
		background: linear-gradient(135deg, #248afd 0%, #3b7cff 100%);
		height: 120rpx;
		display: flex;
		align-items: flex-end;
		padding: 0 30rpx 20rpx 30rpx;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		position: relative;
	}

	.back {
		color: #fff;
		font-size: 44rpx;
		margin-right: 30rpx;
		font-weight: bold;
	}

	.nav-title {
		color: #fff;
		font-size: 36rpx;
		font-weight: 500;
	}

	.card {
		background: #fff;
		border-radius: 24rpx;
		margin: 30rpx 20rpx 0 20rpx;
		padding: 30rpx 24rpx 10rpx 24rpx;
		box-shadow: 0 4rpx 24rpx rgba(36, 138, 253, 0.06);
	}

	.form-row {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.label {
		width: 180rpx;
		color: #333;
		font-size: 28rpx;
		text-align: right;
		margin-right: 10rpx;
	}

	.input {
		flex: 1;
		height: 60rpx;
		background: #f5f6fa;
		border-radius: 30rpx;
		border: none;
		padding: 0 24rpx;
		font-size: 28rpx;
		color: #333;
	}

	.select {
		color: #999;
	}

	.get-code {
		color: #248afd;
		font-size: 28rpx;
		margin-left: 16rpx;
	}

	.section-title {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 16rpx;
		font-weight: 500;
	}

	.textarea {
		width: 100%;
		min-height: 100rpx;
		background: #f5f6fa;
		border-radius: 20rpx;
		padding: 20rpx;
		font-size: 28rpx;
		color: #333;
		border: none;
	}

	.img-row {
		display: flex;
		flex-direction: row;
		gap: 24rpx;
		margin-bottom: 20rpx;
	}

	.img-upload {
		width: 150rpx;
		height: 150rpx;
		background: #f5f6fa;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		border: 2rpx dashed #e0e0e0;
		overflow: hidden;
	}

	.img-placeholder {
		color: #bbb;
		font-size: 32rpx;
		text-align: center;
		line-height: 44rpx;
	}

	.img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.register-btn {
		width: 80vw;
		max-width: 600rpx;
		margin: 40rpx auto 0 auto;
		height: 90rpx;
		background: linear-gradient(90deg, #4d8afd 0%, #166dff 100%);
		color: #fff;
		border-radius: 50rpx;
		font-size: 32rpx;
		line-height: 90rpx;
		border: none;
		text-align: center;
		font-weight: 500;
	}
</style>